<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");
			body {
			  margin: 0;
			}
			
			.container {
			  --bg: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%);
			  position: relative;
			  height: 100vh;
			  background-image: var(--bg);
			}
			.container .slideshow {
			  position: absolute;
			  top: 0;
			  left: 0;
			  width: 100%;
			  height: 100%;
			}
			.container .slideshow .slide {
			  position: absolute;
			  top: 0;
			  left: 0;
			  width: 0;
			  height: 100%;
			  overflow: hidden;
			  animation: slide-right 0.6s ease-in-out forwards;
			}
			.container .slideshow .slide::after {
			  position: absolute;
			  content: "";
			  top: 0;
			  left: 0;
			  width: 100vw;
			  height: 100%;
			}
			.container .slideshow .slide:nth-child(1) {
			  animation-delay: 0.15s;
			}
			.container .slideshow .slide:nth-child(1)::after {
			  background: url("https://i.loli.net/2019/11/23/cnKl1Ykd5rZCVwm.jpg") center/cover no-repeat;
			}
			.container .slideshow .slide:nth-child(2) {
			  animation-delay: 0.3s;
			}
			.container .slideshow .slide:nth-child(2)::after {
			  background: url("https://i.loli.net/2019/10/18/uXF1Kx7lzELB6wf.jpg") center/cover no-repeat;
			}
			.container .slideshow .slide:nth-child(3) {
			  animation-delay: 0.45s;
			}
			.container .slideshow .slide:nth-child(3)::after {
			  background: url("https://i.loli.net/2019/11/16/FLnzi5Kq4tkRZSm.jpg") center/cover no-repeat;
			}
			.container .slideshow .slide:nth-child(4) {
			  animation-delay: 0.6s;
			}
			.container .slideshow .slide:nth-child(4)::after {
			  background: url("https://i.loli.net/2019/11/03/RtVq2wxQYySDb8L.jpg") center/cover no-repeat;
			}
			.container .slideshow .slide:nth-child(5) {
			  animation-delay: 0.75s;
			}
			.container .slideshow .slide:nth-child(5)::after {
			  background: url("https://i.loli.net/2019/10/18/buDT4YS6zUMfHst.jpg") center/cover no-repeat;
			}
			.container .slideshow .slide:nth-child(6) {
			  animation-delay: 0.9s;
			}
			.container .slideshow .slide:nth-child(6)::after {
			  background: url("https://i.loli.net/2019/11/16/cqyJiYlRwnTeHmj.jpg") center/cover no-repeat;
			}
			.container .slideshow .overlay {
			  position: absolute;
			  top: 0;
			  left: 0;
			  width: 100%;
			  height: 100%;
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  background-image: var(--bg);
			  transform: translateX(-100%);
			  animation: move-right 0.6s ease-in-out forwards;
			  animation-delay: 1.9s;
			}
			.container .slideshow .overlay h1 {
			  font-size: 250%;
			  font-family: Lora, serif;
			  letter-spacing: 0.2em;
			  color: white;
			  text-shadow: 0 2px 2px black;
			  opacity: 0;
			  animation: fade-in 1s forwards;
			  animation-delay: 2.6s;
			}
			
			@keyframes slide-right {
			  to {
			    width: 100%;
			  }
			}
			@keyframes move-right {
			  to {
			    transform: translateX(0);
			  }
			}
			@keyframes fade-in {
			  to {
			    opacity: 1;
			  }
			}
		</style>
	</head>
	<body>
		<main class="container">
		  <section class="slideshow">
		    <div class="slide"></div>
		    <div class="slide"></div>
		    <div class="slide"></div>
		    <div class="slide"></div>
		    <div class="slide"></div>
		    <div class="slide"></div>
		    <div class="overlay">
		      <h1>Pure CSS Image Slider</h1>
		    </div>
		  </section>
		</main>
		
		
		
		资源1× 0.5× 0.25×重新
	</body>
</html>
